<!--月投诉受理、失物查询（招领）统计报表-->
<template>
  <div class="public-common">
    <div class="public-title">月投诉失物查询报表上报列表</div>
    <el-form :model="form" label-width="120px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="报表月份">
            <el-date-picker style="width: 100%;" format="yyyy/MM/dd" value-format="yyyy/MM/dd" v-model="form.yue" type="date"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="名称">
            <el-input v-model="form.ming" placeholder="请输入搜索关键词进行快速搜索"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-button type="primary" icon="el-icon-search" style="margin-left:10px;">搜索</el-button>
          <el-button type="primary" icon="el-icon-tickets" @click="dialogVisible=true">新建</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-table :data="tabledata" size="mini" border stripe header-row-class-name="textcenter">
      <el-table-column label="报表月份" fixed="left" prop="a1">
      </el-table-column>
      <el-table-column label="上报日期" prop="a2">
      </el-table-column>
      <el-table-column label="未使用计价器" prop="a3">
      </el-table-column>
      <el-table-column label="高收费" prop="a4">
      </el-table-column>
      <el-table-column label="拒载" prop="a5">
      </el-table-column>
      <el-table-column label="绕行" prop="a6">
      </el-table-column>
      <el-table-column label="中断服务" prop="a7">
      </el-table-column>
      <el-table-column label="未按规范服务" prop="a8">
      </el-table-column>
      <el-table-column label="计价器问题" prop="a9">
      </el-table-column>
      <el-table-column label="其他" prop="a10">
      </el-table-column>
      <el-table-column label="小结" prop="a11">
      </el-table-column>
      <el-table-column label="失物查询及招领" prop="a12">
      </el-table-column>
      <el-table-column label="招领数" prop="a13">
      </el-table-column>
      <el-table-column label="备注" prop="a14">
      </el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page.now"
      :page-sizes="page.sizes" :page-size="page.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="page.total"
      style="margin-top:10px;">
    </el-pagination>
    <el-dialog title="月投诉失物查询报表上报" :visible.sync="dialogVisible" width="50%">
      <el-form :model="editForm" ref="editForm" label-width="80px" class="qysb-form-f">
        <el-scrollbar style="height:100%;">
          <div class="fuwukab" style="background: none; color: #d21706; margin-bottom: 0;">请于26日之前上报本月报表</div>
          <div class="fuwukab">月投诉受理、失物查询（招领）统计报表</div>
          <table class="border-table">
            <tbody>
              <tr>
                <th colspan="2">
                  经营单位
                </th>
                <td colspan="4" style="text-align: left">
                  <div id="txtCompanyName_Container" style="display:inline;" class=" readonly">

                    <input type="text" size="20" autocomplete="off" id="txtCompanyName" name="txtCompanyName" class=" x-form-text x-form-field x-item-disabled"
                      disabled="" style="width: 192px;"></div>
                </td>
                <th>
                  起止日期
                </th>
                <td colspan="4" style="white-space: nowrap;">
                  <div style="float: left">
                    <div id="txbDateBegin_Container" style="display:inline;" class=" readonly">

                      <div class="x-form-field-wrap x-item-disabled" id="ext-gen271" style="width: 100px; float: left; margin-top: 5px;"><input type="text"
                          size="10" autocomplete="off" id="txbDateBegin" name="txbDateBegin" class=" x-form-text x-form-field"
                          disabled="" style="width: 92px;"><img src="/extjs/resources/images/default/s-gif/coolite.axd"
                          class="x-form-trigger x-form-date-trigger" id="ext-gen272" style="display: none;"></div>
                    </div>
                  </div>
                  <span style="line-height: 2em; float: left">至</span>
                  <div id="txbDateEnd_Container" style="display:inline;" class=" readonly">

                    <div class="x-form-field-wrap x-item-disabled" id="ext-gen281" style="width: 100px; float: left; margin-top: 5px;"><input type="text"
                        size="10" autocomplete="off" id="txbDateEnd" name="txbDateEnd" class=" x-form-text x-form-field"
                        disabled="" style="width: 92px;"><img src="/extjs/resources/images/default/s-gif/coolite.axd"
                        class="x-form-trigger x-form-date-trigger" id="ext-gen282" style="display: none;"></div>
                  </div>
                </td>
              </tr>
              <tr>
                <th colspan="2">
                  处理情况
                </th>
                <th>
                  未使用<br>
                  计价器
                </th>
                <th>
                  高收费
                </th>
                <th>
                  拒 载
                </th>
                <th>
                  绕 行
                </th>
                <th>
                  中断服务
                </th>
                <th>
                  未按规范<br>
                  服务
                </th>
                <th>
                  计价器<br>
                  问题
                </th>
                <th>
                  其 他
                </th>
                <th>
                  小 结
                </th>
              </tr>
              <tr>
                <th rowspan="2">
                  投诉<br>
                  处理
                </th>
                <th>
                  结案
                </th>
                <td>
                  <div id="txtNoCounter_Container" style="display:inline;">

                    <input type="text" size="20" autocomplete="off" id="txtNoCounter" name="txtNoCounter" class=" x-form-text x-form-field x-form-num-field"
                      style="width: 32px;"></div>
                </td>
                <td>
                  <div id="txtHighCharge_Container" style="display:inline;">

                    <input type="text" size="20" autocomplete="off" id="txtHighCharge" name="txtHighCharge" class=" x-form-text x-form-field x-form-num-field"
                      style="width: 32px;"></div>
                </td>
                <td>
                  <div id="txtRejection_Container" style="display:inline;">

                    <input type="text" size="20" autocomplete="off" id="txtRejection" name="txtRejection" class=" x-form-text x-form-field x-form-num-field"
                      style="width: 32px;"></div>
                </td>
                <td>
                  <div id="txtRound_Container" style="display:inline;">

                    <input type="text" size="20" autocomplete="off" id="txtRound" name="txtRound" class=" x-form-text x-form-field x-form-num-field"
                      style="width: 32px;"></div>
                </td>
                <td>
                  <div id="txtBreakService_Container" style="display:inline;">

                    <input type="text" size="20" autocomplete="off" id="txtBreakService" name="txtBreakService" class=" x-form-text x-form-field x-form-num-field"
                      style="width: 32px;"></div>
                </td>
                <td>
                  <div id="txtNonstandardService_Container" style="display:inline;">

                    <input type="text" size="20" autocomplete="off" id="txtNonstandardService" name="txtNonstandardService"
                      class=" x-form-text x-form-field x-form-num-field" style="width: 32px;"></div>
                </td>
                <td>
                  <div id="txtCounterFault_Container" style="display:inline;">

                    <input type="text" size="20" autocomplete="off" id="txtCounterFault" name="txtCounterFault" class=" x-form-text x-form-field x-form-num-field"
                      style="width: 32px;"></div>
                </td>
                <td>
                  <div id="txtOthers_Container" style="display:inline;">

                    <input type="text" size="20" autocomplete="off" id="txtOthers" name="txtOthers" class=" x-form-text x-form-field x-form-num-field"
                      style="width: 32px;"></div>
                </td>
                <td>
                  <div id="txtSummary_Container" style="display:inline;">

                    <input type="text" size="20" autocomplete="off" id="txtSummary" name="txtSummary" class=" x-form-text x-form-field x-form-num-field"
                      style="width: 32px;"></div>
                </td>
              </tr>
              <tr>
                <th style="white-space: nowrap;">
                  未结案
                </th>
                <td>
                  <div id="txtNoCounter_No_Container" style="display:inline;">

                    <input type="text" size="20" autocomplete="off" id="txtNoCounter_No" name="txtNoCounter_No" class=" x-form-text x-form-field x-form-num-field"
                      style="width: 32px;"></div>
                </td>
                <td>
                  <div id="txtHighCharge_No_Container" style="display:inline;">

                    <input type="text" size="20" autocomplete="off" id="txtHighCharge_No" name="txtHighCharge_No" class=" x-form-text x-form-field x-form-num-field"
                      style="width: 32px;"></div>
                </td>
                <td>
                  <div id="txtRejection_No_Container" style="display:inline;">

                    <input type="text" size="20" autocomplete="off" id="txtRejection_No" name="txtRejection_No" class=" x-form-text x-form-field x-form-num-field"
                      style="width: 32px;"></div>
                </td>
                <td>
                  <div id="txtRound_No_Container" style="display:inline;">

                    <input type="text" size="20" autocomplete="off" id="txtRound_No" name="txtRound_No" class=" x-form-text x-form-field x-form-num-field"
                      style="width: 32px;"></div>
                </td>
                <td>
                  <div id="txtBreakService_No_Container" style="display:inline;">

                    <input type="text" size="20" autocomplete="off" id="txtBreakService_No" name="txtBreakService_No"
                      class=" x-form-text x-form-field x-form-num-field" style="width: 32px;"></div>
                </td>
                <td>
                  <div id="txtNonstandardService_No_Container" style="display:inline;">

                    <input type="text" size="20" autocomplete="off" id="txtNonstandardService_No" name="txtNonstandardService_No"
                      class=" x-form-text x-form-field x-form-num-field" style="width: 32px;"></div>
                </td>
                <td>
                  <div id="txtCounterFault_No_Container" style="display:inline;">

                    <input type="text" size="20" autocomplete="off" id="txtCounterFault_No" name="txtCounterFault_No"
                      class=" x-form-text x-form-field x-form-num-field" style="width: 32px;"></div>
                </td>
                <td>
                  <div id="txtOthers_No_Container" style="display:inline;">

                    <input type="text" size="20" autocomplete="off" id="txtOthers_No" name="txtOthers_No" class=" x-form-text x-form-field x-form-num-field"
                      style="width: 32px;"></div>
                </td>
                <td>
                  <div id="txtSummary_No_Container" style="display:inline;">

                    <input type="text" size="20" autocomplete="off" id="txtSummary_No" name="txtSummary_No" class=" x-form-text x-form-field x-form-num-field"
                      style="width: 32px;"></div>
                </td>
              </tr>
              <tr>
                <th colspan="2">
                  失物查询及招领
                </th>
                <td colspan="9" style="text-align: left">
                  <div id="txtLossCount_Container" style="display:inline;">

                    <input type="text" size="20" autocomplete="off" id="txtLossCount" name="txtLossCount" class=" x-form-text x-form-field x-form-num-field"
                      style="width: 92px;"></div>
                </td>
              </tr>
              <tr>
                <th rowspan="2" colspan="2" height="50">
                  备 注
                </th>
                <td rowspan="2" colspan="9" style="text-align: left; height: 65px">
                  <div id="txtMemo_Container" style="display:inline;">

                    <input type="text" size="20" autocomplete="off" id="txtMemo" name="txtMemo" class=" x-form-text x-form-field"
                      style="width: 90%; height: 58px;"></div>
                </td>
              </tr>

            </tbody>
          </table>
          <div style="text-align:center;margin-top:6px;">
            <el-button type="primary" @click="">确认</el-button>
            <el-button type="primary" @click="">上报</el-button>
            <el-button type="info" size="small" @click="dialogVisible=false">取消</el-button>
          </div>
        </el-scrollbar>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        dialogVisible: false,
        tabledata: [
          {
              a1: '2018-10',
              a2: '2018-10-10',
              a3: '未使用',
              a4: '2',
              a5: '5',
              a6: '1',
              a7: '1',
              a8: '1',
              a9: '暂无',
              a10: '暂无',
              a11: '暂无',
              a12: '1',
              a13: '暂无',
              a14: '暂无',
          },
          {
              a1: '2018-11',
              a2: '2018-11-10',
              a3: '未使用',
              a4: '5',
              a5: '4',
              a6: '2',
              a7: '2',
              a8: '2',
              a9: '暂无',
              a10: '暂无',
              a11: '暂无',
              a12: '2',
              a13: '暂无',
              a14: '暂无',
          },
          {
              a1: '2018-12',
              a2: '2018-12-10',
              a3: '未使用',
              a4: '3',
              a5: '7',
              a6: '2',
              a7: '3',
              a8: '3',
              a9: '暂无',
              a10: '暂无',
              a11: '暂无',
              a12: '3',
              a13: '暂无',
              a14: '暂无',
          },
        ],
        page: {
          now: 1,
          pagesize: 10,
          sizes: [2, 10, 20, 50, 100],
          total: 0,
          key: ''
        },
        form: {
          yue: '',
          ming: ''
        },

      }
    },
    methods: {
      //分页
      handleSizeChange(pagesize) {
        this.page.pagesize = pagesize;
        this.search(true, true);
      },
      handleCurrentChange(pageno) {
        this.page.now = pageno;
        this.search(true, true);
      }

    }
  }
</script>

<style>
  .cyqlabel .el-form-item__label {
    width: 100px !important;
  }

  .cyqlabel .el-form-item__content {
    margin-left: 100px !important;
  }

  .public-common .el-form-item .el-input {
    width: 100%;
  }

  .public-title,
  .fuwukab {
    line-height: 30px;
    background-color: #deecfd;
    padding: 0 10px;
    margin-bottom: 20px;
    color: #15428F
  }

  .el-scrollbar__wrap {
    margin: 0 !important;
  }

  .el-dialog__body {
    padding: 10px 20px;
  }
  .border-table {
    width: 100%;
    display: table;
    border-top: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-collapse: collapse !important;
    border-spacing: 0px !important;
  }

  .border-table th,
  .border-table td {
    padding: 10px 0;
    border-left: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    padding-left: 2px;
    /* padding-bottom: 2px !important; */
    text-align: center;
    vertical-align: middle;
    min-width: 40px;
  }
  .x-form-text{ border:#ddd solid 1px; color: #787878;}
</style>
